第五章：字型（7）

第 11 屆 iThome 鐵人賽

DAY 25

Modern Web

CSS大全閱讀筆記系列第 25 篇

11th鐵人賽

Camellus

2019-10-11 23:52:04

997 瀏覽

分享至

字型樣式：
a. 使用font-style來定義字體樣式，預設值是normal，可設定值還有italic和oblique，可以作用於所有元素，也可用在動畫上，會繼承親代元素的值，寫作font-style: normal;。
b. font-style中的預設值normal是指非斜體也沒有任何傾斜的文字。
c. italic與oblique的差異：
- italic所對應的italic字貌是獨立的字貌，會在字元外貌上有少許更動，襯線體更會發現襯線上因此而更動的變化，而oblique所對應的oblique字貌，只是單純地將字元傾斜，可以用其他CSS屬性計算達到一樣的效果。
- 一般而言，字型中帶有Italic、Cursive、Kursiv的字體通常會對應italic關鍵字，而帶有Oblique、Stanted、Incline的字體會使用oblique這個關鍵字。
d. 當字體沒有italic而有oblique字貌時，就算給予font-style: italic;，也會顯示font-style: oblique;的效果，但若是沒有oblique而有italic字貌時，font-style: oblique;就不會有作用。而有些作業系統上，italic字貌和oblique字貌會有混用的現象。
e. 能使用複數個@font-face{}中包含的font-family和font-style配對指定不同字型樣式給予不同的字型檔，但不支援inherit關鍵字。
字型伸展：
a. 當某些字型家族中有較寬或較窄的字型時，可以不用額外使用font-family宣告，而是使用font-stretch，這種情況通常字型都會有Condensed、Wide或Ultra Expanded等額外標示可供辨識。
b. 使用font-stretch來定義字體樣式，預設值是normal，可以作用於所有元素，會繼承親代元素的值，當字型檔中沒有提供與設定值關鍵字相對應的字型變體時，font-stretch沒有任何的作用。使用時，寫作font-stretch: normal;。
c. font-stretch的設定值：
- 預設值：normal。
- 變窄（由寬至窄）：semi-condensed、condensed、extra-condensed、ultra-condensed。
- 變寬（由窄至寬）：semi-expanded、expanded、extra-expanded、ultra-expanded。
d. 能使用複數個@font-face{}中包含的font-family和font-stretch配對指定不同字型伸展給予不同的字型檔，但不支援inherit關鍵字。
e. 注意使用font-stretch時在攜帶式裝置的支援度。
字距調整：
a. 某些字型檔中有每個字元間距的資訊，稱為字距調整（kerning），因為字元會因為結合方式的不同而導致字元間距的改變。
b. 可使用font-kerning來定義字距，預設值是auto，能作用於所有元素，會繼承親代元素的值，但font-kerning需在字型檔中有相關資訊時才會啟用，寫成font-kerning: auto;。
c. font-kerning的設定值：
- auto：是預設值，表示讓使用者代理選擇最佳顯示方式，因此當字型檔中沒有font-kerning資訊時，就不會有任何作用。
- normal：讓使用者代理依照字型檔中的font-kerning資訊調整字距。
- none：不做任何字距的調整。
d. 同時使用font-kerning和letter-spacing時，font-kerning會先作用，之後才是依照letter-spacing數值調整。